import "@/assets/styles/app.scss";
import { Suspense } from "react";
import { Outlet, useNavigate } from "react-router-dom";
import { Layout } from "antd";
import { MessageOutlined } from "@ant-design/icons";
import { Icon,addIcon } from '@iconify-icon/react';

const { Header, Content } = Layout;
const test="alert"

addIcon('alert', {
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v18m14 0V3M5 7h14M5 15h14M8 13v4m3-4v4m5-4v4M14 5v4m-3-4v4M8 5v4M3 21h18"/>',
  width: 24,
  height: 24,
});

addIcon('test1', {
  body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12h4l3 8l4-16l3 8h4"/>',
  width: 24,
  height: 24,
});

// 菜单
const items = [
  {
    key: "0",
    router: "/projectlist",
    label: "项目列表",
    icon:  <Icon icon="tabler:apple-filled" />  ,
  },
  {
    key: "1",
    router: "/datasource",
    label: "数据源",
    icon: <Icon icon={"test1"} />,
  },
];

const App = () => {
  let navigate = useNavigate();

  //   菜单点击
  const menuClick = ({key}) => {
    // 跳转对应路由
    navigate(items[key].router);
  };

  return (
      <Layout className="lego-app">
        <Header className="lego-app-header">
          <div className="lego-logo" />
          <Menu
            className="lego-app-menu"
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["1"]}
            items={items}
            onClick={menuClick}
          />
        </Header>
        <Content className="lego-app-content">
          <Suspense fallback={<div>loading...</div>}>
            <Outlet />
          </Suspense>
        </Content>
      </Layout>
  );
};

export default App;
